<template>
  <el-form ref="form" :model="form" label-width="100px" :inline="true">
    <el-row>
      <el-col :span="8">
        <el-form-item label="姓名">
          <el-input v-model="form.name" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="身份证号">
          <el-input v-model="form.idCard" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="户口所在地">
          <el-cascader
            v-model="form.province"
            :options="areaSelectData"
            class="full-width"
            size="large"
            placeholder="请选择您所在的城市"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="联系方式">
          <el-input v-model="form.phone" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="长期居住地">
          <el-cascader
            v-model="form.province2"
            :options="areaSelectData"
            class="full-width"
            size="large"
            placeholder="请选择您所在的城市"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="性别">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="1" />
            <el-option label="女" value="2" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="民族">
          <el-select v-model="form.nation" placeholder="请选择民族">
            <el-option label="汉族" value="1" />
            <el-option label="其他" value="2" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="form.birth"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="婚姻状况">
          <el-select v-model="form.marry" placeholder="请选择">
            <el-option label="已婚" value="1" />
            <el-option label="未婚" value="2" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="生育情况">
          <el-select v-model="form.fertility" placeholder="请选择">
            <el-option label="已育" value="1" />
            <el-option label="未育" value="2" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="教育程度">
          <el-select v-model="form.educationBackground" placeholder="请选择">
            <el-option
              v-for="item in educationBackground_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="家庭收入">
          <el-select v-model="form.money" placeholder="请选择">
            <el-option
              v-for="item in money_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="体力劳动等级">
          <el-select v-model="form.level" placeholder="请选择">
            <el-option
              v-for="item in level_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="首诊医院">
          <el-select v-model="form.firstHospital" placeholder="请选择">
            <el-option label="本院" value="1" />
            <el-option label="外院" value="2" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="首诊科室">
          <el-input v-model="form.firstOffice" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="是否同意抽血">
          <el-select v-model="form.drawBlood" placeholder="请选择">
            <el-option label="是" value="1" />
            <el-option label="否" value="2" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="入组时间">
          <el-date-picker
            v-model="form.joinTime"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="关系">
          <el-select v-model="form.relation" placeholder="请选择">
            <el-option label="父母" value="1" />
            <el-option label="子女" value="2" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="联系电话">
          <el-input v-model="form.phone1" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="联系电话2">
          <el-input v-model="form.phone2" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="负责医生">
          <el-input v-model="form.doctor" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="所属机构">
          <el-input v-model="form.affiliation" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item size="large">
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { initData } from '@/api/data'
import { regionData } from 'element-china-area-data'
import { edit } from '@/api/patient'
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      form: {

      },
      query: {
        id: ''
      },
      areaSelectData: regionData,
      level_options: [
        {
          value: '1',
          label: 'I'
        }, {
          value: '2',
          label: 'II'
        }, {
          value: '3',
          label: 'III'
        }, {
          value: '4',
          label: 'IV'
        }
      ],
      educationBackground_options: [
        {
          value: '小学',
          label: '小学'
        }, {
          value: '初中',
          label: '初中'
        }, {
          value: '高中',
          label: '高中'
        }, {
          value: '大专',
          label: '大专'
        },
        {
          value: '大学及以上',
          label: '大学及以上'
        }, {
          value: '其他',
          label: '其他'
        }
      ],
      money_options: [
        {
          value: '1',
          label: '10000以内'
        }, {
          value: '2',
          label: '10000-30000'
        }, {
          value: '3',
          label: '30000-80000'
        }, {
          value: '4',
          label: '80000-150000'
        }, {
          value: '5',
          label: '150000-300000'
        }, {
          value: '6',
          label: '300000以上'
        }
      ]
    }
  },
  created() {
    this.query.id = this._routerRoot._route.query.id
    initData('api/patient/findById', this.query).then(data => {
      if (data.sex !== undefined) {
        data.sex = data.sex + ''
      }
      if (data.marry !== undefined) {
        data.marry = data.marry + ''
      }
      if (data.money !== undefined) {
        data.money = data.money + ''
      }
      if (data.level !== undefined) {
        data.level = data.level + ''
      }
      if (data.drawBlood !== undefined) {
        data.drawBlood = data.drawBlood + ''
      }
      if (data.nation !== undefined) {
        data.nation = data.nation + ''
      }
      data.province = data.provinceArr
      data.province2 = data.provinceArr2
      this.form = data
      this.setBirth(data.birth)
    })
  },
  methods: {
    onSubmit() {
      edit(this.form).then(res => {
        alert('提交成功！')
      })
    },
    ...mapMutations(
      [
        'setBirth'
      ]
    )
  }
}
</script>

<style>

</style>
